<template>
  <div class="page-container h-100">
    <div class="h-100 container">
      <div class="globalDiv h-100 leftNav">
        <ul class="menuList">
          <li :class="{ active: activeFlag == 'bcgl' }" @click="toLink('bcgl')">
            <i class="iconfont-KUI icon-Clock"></i>
            <!-- <i class="icon-clipboard-check icon"></i> -->
            <!--班次管理-->
            <span class="title">班次管理</span>
          </li>
          <li
              :class="{ active: ['kqzglxq', 'kqzgl'].includes(activeFlag) }"
              @click="toLink('kqzgl')"
          >
            <i class="iconfont-KUI icon-Multiple-people"></i>
            <!-- <i class="icon-user-two icon"></i> -->
            <!--考勤组管理-->
            <span class="title">考勤组管理</span>
          </li>
          <li
              :class="{ active: activeFlag == 'jjrgl' }"
              @click="toLink('jjrgl')"
          >
            <i class="iconfont-KUI icon-festival"></i>
            <!--节假日管理-->
            <span class="title">节假日管理</span>
          </li>
          <li
              :class="{ active: activeFlag == 'aboutgl' }"
              @click="toLink('aboutgl')"
          >
            <i class="iconfont-KUI icon-fangkuai"></i>
            <!--关于-->
            <span class="title">关于</span>
          </li>
        </ul>
      </div>
      <div class="rightTable">
        <!--        班次管理-->
        <Classes v-if="activeFlag == 'bcgl'"></Classes>
        <!--        考勤组管理-->
        <AttendanceGroup v-if="activeFlag == 'kqzgl'" @add-attendance="addAttendance"></AttendanceGroup>
        <!--        节假日管理-->
        <Holiday v-if="activeFlag == 'jjrgl'"></Holiday>
        <!--        考勤组管理详情-->
        <AttendanceGroupDetails v-if="activeFlag == 'kqzglxq'"></AttendanceGroupDetails>
        <!--        关于-->
        <About v-if="activeFlag == 'aboutgl'"></About>
      </div>
    </div>
  </div>
</template>

<script>
import AttendanceGroup from "./attendance-group/index.vue";
import Classes from "./classes/index.vue";
import Holiday from "./holiday/index.vue";
import About from "./about/index.vue";
import AttendanceGroupDetails from "./attendance-group/components/details.vue";

export default {
  name: "xtpz",
  components: {
    Holiday,
    Classes,
    AttendanceGroup,
    AttendanceGroupDetails,
    About,
  },
  data() {
    return {
      activeFlag: "bcgl",
    };
  },
  methods: {
    toLink(url) {
      this.activeFlag = url;
      // this.$router.replace(url)
    },
    addAttendance(id) {
      this.activeFlag = "kqzglxq";
    },
  },
  // beforeRouteLeave(to, from, next) {
  //   if (this.activeFlag == "kqzglxq") {
  //     this.activeFlag = "kqzgl";
  //     next(false);
  //   }
  // },
  mounted() {},
};
</script>

<style lang="less" scoped>
.globalDiv {
  border-radius: 4px;
  overflow: hidden;
}
.menuList li {
  height: 45px;
  padding-left: 15px;
  box-sizing: border-box;
  &.active,
  &:hover {
    cursor: pointer;
    color: #fff;
    background: linear-gradient(
        270deg,
        rgba(33, 153, 190, 1) 0%,
        rgba(6, 98, 209, 1) 100%
    );
  }
  .title {
    line-height: 45px;
    margin-left: 15px;
  }
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border: 0px solid green;
  .leftNav {
    width: 250px;
    display: inline-block;
    border: 0px solid red;
  }
  .rightTable {
    display: inline-block;
    border: 0px solid red;
    width: calc(100% - 270px);
  }
}
</style>
